<template>
  <!--:action 上传的地址-->
  <!--data	上传时附带的额外参数-->
  <!--show-file-list , 已经上传的图片-->
    <el-upload class="uploadOfel"
               ref="uploadEl"
               :action="actionUrl"
               :on-success='handleSuccess'
               :on-error="handleError"
               :before-upload="beforeUpload"
               :on-exceed="handleOutOfMaxSum"
               :before-remove="handleBeforeRemove"
               :on-progress="handleOnProgress"
               :show-file-list="true"
               :auto-upload="false"
               :limit="10"
               drag
               multiple>
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">将文件拖到此处，或  点击上传  </div>
    <div class="el-upload__tip" slot="tip">只能上传 JPG/PNG/GIF 文件，且不超过 50M</div>
  </el-upload>

</template>

<script>
export default {
  props: {

  },
  data() {
    return {
      // actionUrl: "http://192.168.2.164:8080/AivinInfo/uploadFiles" ,
      actionUrl: 'http://127.0.0.1/uploadFiles' ,
      fileAllSum:0 ,
      successedFileSum:0
    };
  },
  methods: {
    handleSuccess(res, file ,fileList) {
      // 上传成功
      //
      this.successedFileSum++ ;

      if( this.successedFileSum == this.fileAllSum){
        // 部分上传失败的显示逻辑 暂时不做。需要时再添加
        this.$message.success( "全部上传完毕"  );
        // 通过实时改变状态的方式关闭弹窗
        this.$store.dispatch( 'changeUploadDialogVisableAction', false)
      }
    /*  console.log("成功返回结果： "+res)
      console.log("成功返回结果： "+ this.successedFileSum +"  "+ this.fileAllSum)*/
    },
    handleError(res) {
      this.$message.error("上传失败");
    },
    beforeUpload(file ) {
      //console.log("在图片提交前进行验证" )
      return  true;
    },
    handleOnProgress(event, file, fileList){
      this.fileAllSum = fileList.length ;
      //console.log("正在上传"+fileList.length)
    },
    handleOutOfMaxSum(){
      this.$message.error("最多只能一次传10个");
    },
    handleBeforeRemove(){
      //this.$message.error("删除文件");
    },
    doUpload(){
      this.$refs.uploadEl.submit();
    }
  }
};
</script>

<style lang="scss" scoped>
.uploadOfel {
  text-align: center;
  img {
    width: 100%;
    height: auto;
  }
}
</style>

